<template>
  <div id="reservation_index">
  	<div class="title"> 预约记录</div>
  	<div class="table-data">
  		<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
  			<el-form-item label="预约日期：">
  				<el-date-picker
						@change="changeDate($event)"
						class="custom-select"
						v-model="formInline.date"
						type="date"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
						placeholder="全部">
					</el-date-picker>
  			</el-form-item>
  			<el-form-item label="预约时间段：">
  				 <el-select v-model="formInline.time" placeholder="全部" class="custom-select" @change="changeTime($event)">
  				 	<el-option v-for="(item,index) in timeArr" :key="index" :label="item.appoTime"  :value="item.appoTimeId"></el-option>
  				 </el-select>
  			</el-form-item>
  			<el-form-item>
  				<el-input
						@change="changeOther($event)"
						style="width:250px"
						placeholder="预约用户/预约业务/预约状态"
						v-model="formInline.other"
						clearable>
					</el-input>
  			</el-form-item>
  			<el-form-item>
  				<el-button class="custom-btn" type="primary" size="medium" @click="submitForm('formInline')">查询</el-button>
  				<el-button class="custom-btn" size="medium" @click="resetForm('formInline')">重置</el-button>
  			</el-form-item>
  		</el-form>
  		<el-table :data="tableData"  class="e-table">
  			<el-table-column  label="序号" width="90" align="center">
  				<template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span></template>
  			</el-table-column>
  			<el-table-column prop="idCard" label="预约用户" align="center" ></el-table-column>
  			<el-table-column prop="businessName" label="办理业务 " align="center"></el-table-column>
  			<el-table-column prop="appoTime" label="预约时间" align="center"></el-table-column>
				<el-table-column prop="status" label="状态" column-key="status" width="" align="center">
					<!-- <template slot-scope="scope">
						<span v-if="scope.row.status == '爽约' "><img class="state_img" src="../assets/img/state_2.png" alt="">爽    约</span>
						<span v-else-if="scope.row.status == '未赴约' "><img class="state_img" src="../assets/img/state_1.png" alt="">未赴约</span>
						<span v-else-if="scope.row.status == '已赴约' "><img class="state_img" src="../assets/img/normal.png" alt="">已赴约</span>
						<span v-else-if="scope.row.status == '已取消' "><img class="state_img" src="../assets/img/state_4.png" alt="">已取消</span>
						<span v-else-if="scope.row.status == '已作废' "><img class="state_img" src="../assets/img/state_4.png" alt="">已作废</span>
						<span v-else-if="scope.row.status == '办理中' "><img class="state_img" src="../assets/img/state_3.png" alt="">办理中</span>
						<span v-else-if="scope.row.status == '黑名单' "><img class="state_img" src="../assets/img/state_2.png" alt="">黑名单</span>
						<span v-else-if="scope.row.status == '叫号中' "><img class="state_img" src="../assets/img/state_1.png" alt="">叫号中</span>
						<span v-else-if="scope.row.status == '拉入黑名单' "><img class="state_img" src="../assets/img/state_1.png" alt="">拉入黑名单</span>
						<span v-else-if="scope.row.status == '解除黑名单' "><img class="state_img" src="../assets/img/state_1.png" alt="">解除黑名单</span>
					</template> -->
				</el-table-column>
  			<el-table-column label="操作" align="" width="100">
  				<template slot-scope="scope">
  					<img style="cursor:pointer;" src="../assets/img/operation.png" alt="" @click="goDetail(scope.row.appoId)">
						<img v-if="scope.row.status == '未赴约'" style="cursor:pointer;margin-left: 20px;" src="../assets/img/yewu_01.png" alt="" @click="goEdit(scope.row.appoId)">
						<img v-else-if="scope.row.status == '黑名单'" style="cursor:pointer;margin-left: 20px;" src="../assets/img/yewu_01.png" alt="" @click="goBlack(scope.row.appoId)">
						<img v-else-if="scope.row.status == '拉入黑名单'" style="cursor:pointer;margin-left: 20px;" src="../assets/img/yewu_01.png" alt="" @click="goBlack(scope.row.appoId)">
  				</template>
  			</el-table-column>
  		</el-table>
  		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
  		:page-size="pageSize" :page-sizes="[1, 2, 3, 4]" layout="prev, pager, next" :total="counts">
  		</el-pagination>
  	</div>
  </div>
</template>
<script>
import {getRecordList,getRecordTimeRange,getRecordEditInfo} from '../api/getData.js'
export default {
  name: 'reservation_index',
  data: function () {
    return {
			formInline: {
				date: "",
				time: "",
				other: ""
			},
			timeArr:[],
			currentPage: 1,
			pageSize: 10,
			totalPage:'',
			counts:0,
			tableData:[]
		}
  },
  created() {
		console.log(JSON.parse(window.sessionStorage.getItem('latticeid')),"1111")
		this.getTimeRange()
		// this.getList()
	}, // 创建时
  beforeMount: function () {}, // 挂载之前
  mounted: function () {}, // 挂载之后
  beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
  updated: function () {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function () {}, // 实例销毁后调用
	beforeRouteEnter(to, from, next){
		console.log(from.path)
		if(from.path == '/makeReservation/reservationDetail' || from.path == '/makeReservation/reservationEdit'){
			next(vm=>{
					console.log(vm)
					// 每次进入路由执行
					vm.submitForm1('formInline')
			})
		}else{
			next(vm=>{
					vm.submitForm('formInline')
			})
		}
			
	},
  methods: {
		changeDate(val){
			console.log(val)
			this.formInline.date = val
		},
		changeTime(val){
			console.log(val)
			this.formInline.time = val
		},
		changeOther(val){
			console.log(val)
			this.formInline.other = val
		},
		// 获取时间段
		getTimeRange(){
			getRecordTimeRange({
				latticeId:JSON.parse(window.sessionStorage.getItem('latticeid'))
			}).then((res) =>{
				console.log(res.data,"时间段")
				if(res.data.code == 0){
					this.timeArr = res.data.data
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 获取预约记录列表
		getList(){
			getRecordList({
				latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
				multiQuery:'',
				appoDate:'',
				appoTimeId:'',
				pager:this.currentPage,
				pageCount:this.pageSize
			}).then((res) =>{
				console.log(res)
				if(res.data.code === 0){
					/* res.data.data.appoList.forEach((item,index)=>{
						item.idCard = item.idCard.substring(0, 6) + '********' + item.idCard.substring(14, 18)
					}) */
					this.counts = res.data.data.count
					this.tableData = res.data.data.appoList
				}else{
					this.$message.error(res.data.msg)
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
    submitForm(formName) {
    	// console.log(this.formInline,"11111")
			this.currentPage = 1
			getRecordList({
				latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
				multiQuery: this.formInline.other,
				appoDate:this.formInline.date,
				appoTimeId:this.formInline.time,
				pager:1,
				pageCount:this.pageSize
			}).then((res) =>{
				console.log(res)
				if(res.data.code === 0){
					this.counts = res.data.data.count
					this.tableData = res.data.data.appoList
				}else{
					this.$message.error(res.data.msg)
				}
			}).catch((error) =>{
				console.log(error)
			})
    },
		submitForm1(formName) {
			getRecordList({
				latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
				multiQuery: this.formInline.other,
				appoDate:this.formInline.date,
				appoTimeId:this.formInline.time,
				pager:this.currentPage,
				pageCount:this.pageSize
			}).then((res) =>{
				console.log(res)
				if(res.data.code === 0){
					this.counts = res.data.data.count
					this.tableData = res.data.data.appoList
				}else{
					this.$message.error(res.data.msg)
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
    // 重置
    resetForm(formName) {
    	this.formInline.date = "";
    	this.formInline.time = "";
    	this.formInline.other = "";
    },
    handleSizeChange(size) {
    	console.log(this.pageSize)
			this.pageSize = size;
			// this.getList()
    },
    handleCurrentChange(currentPage) {
    	this.currentPage = currentPage;
			// this.getList()
			this.submitForm1('formInline')
    },
		// 跳转详情页
		goDetail(appoid){
			this.$router.push({
				path:'/makeReservation/reservationDetail',
				query:{
					appoId:appoid
				}
			})
		},
		// 跳转编辑页
		goEdit(appoid){
			this.$router.push({
				path:'/makeReservation/reservationEdit',
				query:{
					appoId:appoid
				}
			})
		},
		// 跳转黑名单页
		goBlack(appoid){
			getRecordEditInfo({
				latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
				appoId:appoid
			}).then((res) =>{
				console.log(res.data,"跳转黑名单页前判断")
				if(res.data.code === 0){
					this.$router.push({
						path:'/makeReservation/reservationBlack',
						query:{
							appoId:appoid
						}
					})
				}else if(res.data.code === 1 && res.data.msg === '黑名单不存在') {
					this.$message.error(res.data.msg)
				}else if(res.data.code === 1){
					this.$message.error(res.data.msg)
				}
			}).catch((error) =>{
				console.log(error)
			})
			
		}
  } // 函数
}
</script>
<style lang='scss'>
  #reservation_index{
		.title {
				height: 64px;
				line-height: 64px;
				background: #fff;
				overflow: hidden;
				text-align: left;
				padding-left: 20px;
				color: #333437;
				font-size: 16px;
			}
			.table-data {
				width: 100%;
				height: 100%;
				margin-top: 20px;
				text-align: left;
				padding: 20px 30px;
				background: #fff;
				.custom-select {
					width: 140px;
					height: 32px;
					margin-right: 40px;
				}
				.e-table {
					width: 100%;
					.state_img{
						width: 12px;
						height: 12px;
						margin-right: 4px;
					}
				}
			}
			.el-table th,
			.el-table tr thead {
				background: #fafafa !important;
				color: #333;
				font-weight: bold;
			}
	
			.el-pagination {
				text-align: center;
				margin-top: 40px;
				.el-pager li,
				.btn-next,
				.btn-prev {
					width: 32px;
					height: 32px;
					line-height: 32px;
					background: transparent;
					border: 1px solid #d9d9d9;
				}
				.el-pager li:not(.disabled).active {
					background: #328ef9;
				}
			}
	}
</style>

